<template>
	<view class="pages-card" v-if="info.sn">
		<view class="card-center ">
			<view class="goods-list">
				<view class="row-box goods-item " v-for="(item,index) in info.goods_info" :key="index">
					<image class="goods-img mr-20" :src="item.goods_image" mode="scaleToFill"></image>
					<view class="row-box flex-1">
						<view class="info-box">
							<view class="fs fc-0 fw-6 mb-10">
								{{item.goods_name}}
							</view>
							<view class="fc-0 fs-sm">
								× {{item.goods_num}}
							</view>
						</view>
						<view class="price-box">
							<view class="tag tag-green fs-sm ">
								待付款
							</view>
							<view class="fc-ac mt-10">
								￥{{item.goods_price}}
							</view>
						</view>
					</view>
				</view>

				<view class="row-box mt-10 mb-20">
					<view class="">
						<view class="fs-sm">订单编号:{{info.sn}}</view>
						<view class="fs-sm">支付时间:{{info.pay_time}}</view>
					</view>
					<view class="flex align-items-center">
						<view class="">
							共 <text class="fc-warn">{{info.goods_num}}</text> 件
						</view>
						<view class="ml-20">
							合计 <text class="fc-ac fs-lg fw-6">￥{{info.goods_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card-bottom pt-20 ">
			<view class="">
				<view class="flex align-items-center">
					<image class="icon mr-10" src="/static/images/common/income-1.png" mode="scaleToFill"></image>
					<text class="fc-0 ">预估佣金 </text>
					<text class="fc-ac  ml-10 mr-10">¥{{info.earn_monry_total}}元</text>
				</view>
			</view>
			<view class="flex">
				<image class="icon mr-10" style="flex-shrink: 0;" src="/static/images/common/income-2.png"
					mode="scaleToFill"></image>
				<view class="flex align-items-center" style="flex-wrap: wrap;" v-if="info.earn_monry_list.length">
					<view class="flex align-items-center mr-20 " v-for="(item,index) in info.earn_monry_list"
						:key="index">
						<text class="fc-0 ">{{typeName[item.type]}} </text>
						<text class="fc-ac ml-10 mr-10">¥{{item.earn_money}}元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分佣类型:
				typeName: {
					450: "导购群收益",
					451: "导购专属",
					452: "直营店导购核销",
					453: "导购分享1级",
					454: "导购分享2级",
				}
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		created() {},
		methods: {
			// 去详情页面
			share() {
				this.$emit('share')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.state-img {
		width: 48rpx;
		height: 48rpx;
	}

	.pages-card {
		margin: 0 auto 20rpx;
	}

	.order-item-top {
		position: relative;
		border-bottom: 1rpx solid #ededeb;

		.order-item-top-img {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			z-index: 1;
			top: -30rpx;
			right: -30rpx;
		}

		.nickname {
			width: 340rpx;
		}

		.name {
			max-width: 140rpx;
		}


		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
		}
	}

	.card-center,
	.card-bottom {
		.goods-img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-direction: 0;
		}

		.info-box {
			flex: 1;
		}

		.price-box {
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
			flex-shrink: 0;
		}
	}

	.card-bottom {
		border-top: 1rpx solid #ededeb;
	}

	.card-bottom {
		.icon {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>